<template>
  <div class="phone-container">
    <div class="top">
      <div class="title"><span>首页</span></div>
    </div>
    <div class="banner">
      <img :src="getAssetsFile('phone/phone_c.jpg')" alt="" />
    </div>
    <div class="neirong">
      <a-row :gutter="4">
        <a-col :span="8" v-permission="[state.permissionType.sysAdmin, state.permissionType.pageData_page]">
          <div class="pageItem" @click="toPage('/phone/page1')">
            <img :src="getAssetsFile('phone/sc.png')" alt="" />
            <br />
            <span>生产看板</span>
          </div>
        </a-col>
        <a-col :span="8" v-permission="[state.permissionType.sysAdmin, state.permissionType.pageData_page2]">
          <div class="pageItem">
            <img :src="getAssetsFile('phone/xs.png')"  alt=""/>
            <br />
            <span>销售看板</span>
          </div>
        </a-col>
        <a-col :span="8" v-permission="[state.permissionType.sysAdmin, state.permissionType.pageData_page3]">
          <div class="pageItem" @click="toPage('/phone/page3')">
            <img :src="getAssetsFile('phone/jd.png')"  alt=""/>
            <br />
            <span>销售订单生产进度</span>
          </div>
        </a-col>
        <a-col :span="8" v-permission="[state.permissionType.sysAdmin, state.permissionType.pageData_page4]">
          <div class="pageItem" @click="toPage('/phone/page4')">
            <img :src="getAssetsFile('phone/jd.png')"  alt=""/>
            <br />
            <span>钢球订单生产进度</span>
          </div>
        </a-col>
        <a-col :span="8" v-if="state.showLogout">
          <div class="pageItem" @click="logout">
            <img :src="getAssetsFile('phone/exit.png')"  alt=""/>
            <br />
            <span>退出系统</span>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {reactive, onMounted, nextTick} from "vue";
import PermissionType from "@/utils/PermissionType";
import { getAssetsFile } from '@/utils'
import { useRouter } from 'vue-router';
const router = useRouter();
import { useUserStore } from '@/store'

const state = reactive({
  permissionType : PermissionType,
  showLogout : true
})
const toPage = (to)=>{
  router.push(to)
}
const logout= async ()=>{
  const userStore = useUserStore()
  await userStore.logout()
  window.location.reload()
}
onMounted(()=>{
  nextTick(()=>{

  })
})
</script>

<style lang="less" scoped>
.phone-container {
  div.neirong{
    width: 100%;
    height: calc(100vh - 240px);
    background-color: #ffffff;
    padding: 6px;
    overflow-y: auto;
    .arco-col{
      margin-bottom: 8px;
    }
    .pageItem{
      width: 100%;
      height: 100%;
      padding: 10px;
      text-align: center;
      border: 1px solid #d5cfcf;
      border-radius: 5px;
      span{
        font-size: 12px;
      }
      img{
        display: inline-block;
        width: 42px;
        height: 42px;
        margin-bottom: 8px;
      }
    }
  }
}
</style>
